<template>
  <div id="music" v-if="ifMounted" v-loading="ifLoad" element-loading-background="rgba(23,29,37,0.7)">
    <div id="spre">
      <p id="logo">CodeRealm-MusicBox</p>
      <input v-model="name" @keyup.enter="sent(name)" type="text">
    </div>
    <div id="smid">
      <div id="m_le">
        <div>
          <li v-for="(item, index) in songlist" :key="index" :class="{odd: index % 2 === 0}">
            <img src="@/assets/music/play.png" alt="" @click="sing(item.id)">
            <span :title="item.name + '[' + item.artists[0].name + ']'">{{ item.name }}</span>
            <!-- <p v-if="item.mvid !== 0" @click="getMv(item.mvid)"></p> -->
          </li>
        </div>
      </div>
      <div id="m_mi">
        <img class="play_bar" :class="{start_bar: rotate}" src="@/assets/music/player_bar.png" alt="">
        <img id="albumPic" :class="{start: rotate}" class="autoRotate" :src="albumPic" alt="">
        <img src="@/assets/music/disc.png" :class="{start: rotate}" class="autoRotate" alt="">
      </div>
      <div id="m_ri">
        <h3>热门留言</h3>
        <div>
          <li v-for="(item, index) in comments" :key="index">
            <img :src="item.user.avatarUrl" alt="">
            <div>
              <h4 style="margin: 0px;color: rgb(27 136 249 / 81%)" v-text="item.user.nickname"></h4>
              <span style="font-size:11px">IP属地: {{ item.ipLocation.location }}</span>
              <p style="margin-top: 4px;" v-text="item.content"></p>
            </div>
          </li>
        </div>
      </div>
    </div>
    <div id="saft">
      <audio ref="audio" :src="surl" @play="play" @pause="pause" autoplay controls loop></audio>
    </div>
    <!-- 接口更新后没有MV的了，先不用了 -->
    <video :src="mvUrl" ref="video" v-if="videoShow" @keyup.esc="mvOff" controls></video>
    <div v-if="videoShow" id="mask" @click="mvOff"></div>
  </div>
</template>

<script>
import { ElLoading } from 'element-plus'

export default {
  data() {
    return {
      name: "",
      songlist: [],
      surl: "",
      mvShow: true,
      mvUrl: "",
      videoShow: false,
      albumPic: "",
      rotate: false,
      comments: [],
      ifLoad: false,
      loadingInstance: null,
      ifMounted: false,
    };
  },
  methods: {
    sent(name) {
      const that = this;
      // 显示加载动画
      that.ifLoad = true;
      this.$elaxios.get('https://v3.alapi.cn/api/music/search?keyword=' + name + '&token=w2GMlwBeiwKN2s28&limit=20')
        .then(function(response) {
          console.log(response)
          if(!response.data.data.songs[0]=="") that.songlist = response.data.data.songs;
          else{
            that.songlist = [];
            that.$tools.alertMsg("找不到音乐",'warning')
          }
          // 关闭加载动画
          that.ifLoad = false;
        })
        .catch(function(err) {
          console.error(err);
          // 发生错误时也关闭加载动画
          that.ifLoad = false;
        })
    },
    sing(id) {
      const that = this;
      this.$elaxios.get('https://v3.alapi.cn/api/music/url?id=' + id + '&token=w2GMlwBeiwKN2s28')
        .then(function(response) {
          console.log(response)
          that.surl = response.data.data.url;
          that.getInfo(id);
          that.getComments(id);
        })
        .catch(function(err) {
          console.error(err);
        })
    },
    getInfo(id) {
      const that = this;
      this.$elaxios.get('https://v3.alapi.cn/api/music/detail?id=' + id + '&token=w2GMlwBeiwKN2s28')
        .then(function(response) {
          console.log('详情',response)
          that.albumPic = response.data.data.songs[0].al.picUrl; // 专辑图片
        })
        .catch(function(err) {
          console.error(err);
        })
    },
    getComments(id) {
      const that = this;
      this.$elaxios.get('https://v3.alapi.cn/api/music/comment/hot?id=' + id + '&token=w2GMlwBeiwKN2s28')
        .then(function(response) {
          console.log('评论',response)
          that.comments = response.data.data.comments;
          // 所有数据加载完成后关闭加载动画
          that.ifLoad = false;
          if (that.loadingInstance) {
            that.loadingInstance.close();
          }
        })
        .catch(function(err) {
          console.error(err);
          // 发生错误时也关闭加载动画
          that.ifLoad = false;
          if (that.loadingInstance) {
            that.loadingInstance.close();
          }
        })
    },
    playMv() {
      this.videoShow = true;
      // 替换jQuery操作，使用Vue的ref引用
      if (this.$refs.audio) {
        this.$refs.audio.pause();
      }
    },
    mvOff() {
      this.videoShow = false;
    },
    play() {
      this.rotate = true;
    },
    pause() {
      this.rotate = false;
    }
  },
  created() {
    // this.ifLoad = false;
    
  },
  mounted(){
    // this.ifLoad = true;
    this.ifMounted = true;
  }
};
</script>

<style lang="less" scoped>
*{
    padding: 0px;
    margin: 0px;
    list-style: none;
    text-decoration: none;
}
/*音乐播放器*/
#music{
    position: relative;
    width: 800px;
    height: 550px;
    margin: 10px auto 0px auto;
    background: url(https://drimgs.oss-cn-guangzhou.aliyuncs.com/images/bg.png) no-repeat center center / cover;
}
/*上面部分，logo和搜索框*/
#spre{
    width: 800px;
    height: 60px;
    position: relative;
    z-index: 4;
    background-color: #1eacda;
}
#logo{
    font-family: fzkt;
    font-size: 26px;
    font-weight: bold;
    height: 60px;
    color: #fff;
    position: absolute;
    left: 0px;
    top: 50%;
    margin: -30px 0px 0px 25px;
    line-height: 60px;
    display: inline-block;
}
#spre input{
    opacity: 0.7;
    text-indent: 15px;
    display: inline-block;
    width: 300px;
    height: 36px;
    outline: 0px;
    border: 0px;
    position: absolute;
    right: 0px;
    top: 50%;
    margin: -18px 25px 0px 0px;
    border-radius: 30px;
    background: url(@/assets/music/zoom.png) 265px center no-repeat rgba(255, 255, 255, 0.45);
}
/*中间部分，歌曲，唱片，留言*/
#smid{
    width: 800px;
    height: 435px;
    margin: auto;
    position: relative;
    background-color: #f2f2f2;
    background: rgba(255, 255, 255, 0.5);
}
#smid > div{
    float: left;
}
/*左边，歌曲*/
#m_le{
    width: 199px;
    height: 435px;
    overflow: hidden;
}
#m_le div{
    /*通过一个容器溢出隐藏，实现不出现滚轮保留滚动功能的效果*/
    width: 180px;
    height: 415px;
    padding: 10px 27px 10px 10px;
    border-right: 1px solid grey;
    overflow: hidden scroll;
}
#m_le li{
    display: inline-block;
    width: 150px;
    padding-right: 30px;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}
.odd{
    background-color: rgba(240, 240, 240, 0.3);
}
#m_le li img{
    vertical-align:middle;
    display: inline-block;
    margin: -2.5px 4px 0px 6px;
    height: 17px;
    width: 17px;
    cursor: pointer;
}
#m_le li p{
    position: absolute;
    cursor: pointer;
    width: 23px;
    height: 17px;
    top: 50%;
    margin-top: -8.5px;
    right: 4px;
    background: url(@/assets/music/table.png) left -48px no-repeat;;
}
/*中间，唱片*/
#m_mi{
    width: 399px;
    height: 435px;
    text-align: center;
    border-right: 1px solid grey;
    border-left: 1px solid grey;
}
#m_mi img:first-child{
    position: relative;
    display: block;
    margin: -10px auto 0px auto;
    padding-left: 100px;
    z-index: 3;
}
#m_mi img:last-child{
    position: relative;
    display: block;
    margin: -60px auto 0px auto;
    z-index: 2;
}
#albumPic{
    position: absolute;
    top: 113px;
    right: 327.5px;
    height: 145px;
    width: 145px;
    border-radius: 50%;
}
/* 旋转的动画 */
@keyframes Rotate {
    from {
      transform: rotateZ(0);
    }
    to {
      transform: rotateZ(360deg);
    }
}
/* 旋转的类名 */
.autoRotate {
    animation-name: Rotate;
    animation-iteration-count: infinite;/*时间无穷，就是不停转*/
    animation-play-state: paused;
    animation-timing-function: linear;/*匀速转*/
    animation-duration: 5s;
}
.start{
    animation-play-state: running;
}
.play_bar {
    transform: rotateZ(-32deg);
    transform-origin: 112px 11px;/*与旋转时效果有关系，根据选择不停来调，设置选择的原点*/
    transition: 1s;
}
.start_bar{
    transform: rotateZ(0deg);
}
/*右边，留言*/
#m_ri{
    width: 200px;
    height: 435px;
    overflow: hidden;
}
#m_ri h3{
    margin: 5px 0px 5px 8px;
    font-size: 14px;
}
#m_ri > div{
    width: 220px;
    height: 417px;
    overflow: hidden scroll;
}
#m_ri li{
    width: 200px;
    margin-bottom: 18px;
}
#m_ri li h4{
    font-size: 13px;
    margin-bottom: 5px;
}
#m_ri li p{
    font-size: 12px;
    line-height: 17px;
    color: #666;
}
#m_ri li img{
    display: inline-block;
    margin-left: 8px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    vertical-align: top;
}
#m_ri li > div{
    display: inline-block;
    width: 130px;
    margin-left: 8px;
}
/*底下部分，播放音乐*/
#saft{
    height: 53px;
}
#saft audio{
    width: 800px;
    background-color: #f1f3f4;
    /*改成和audio标签同样的颜色，就会产生矩形播放条效果*/
}
/*MV*/
#music video{
    width: 800px;
    height: 544px;
    z-index: 10;
    display: block;
    top: 0px;
    position: absolute;
    outline-style: none;
}
#mask{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.9);
}
</style>
